<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <style>
        /*表单外框*/
        .rg_layout{
            width: 700px;
            height: 700px;
            border: 8px solid #cef6f8;/*边框 8个像素 实线 设置一个颜色*/
            background: #ffffff;/*背景为白色*/
            /*让这个div水平居中*/
            margin: auto;
            margin-bottom: 10px;
        }
        /*表单项*/
        .td_left{
            width: 200px;
            height:30px;
            text-align: right;
            padding-top: 10px;
        }
        .td_right{
            width: 300px;
            height:30px;
            padding-left: 10px;
            padding-top: 10px;
        }

        /*验证码图片*/
        .td_img{
            padding-left: 290px;
            padding-top: 5px;
        }

        /*登录按钮 居中*/
        .td_sub{
            padding-left: 300px;
            padding-top: 10px;
        }
        /*跳转注册界面超链接*/
        .td_a{
            padding-left: 260px;
            padding-top: 10px;
        }
        /*错误提示信息*/
        #hint{
            height: 20px;
            color: red;
            padding-left: 280px;
            padding-top: 5px;
        }
    </style>
    <script>
        //验证码点击事件
        function changeCheckCode(img) {
            img.src="checkCode?"+new Date().getTime();
        }

        //各个表单项的正则表达式
        //用户名 数字7--15位
        function checkUsername() {
            var reg = /^\d{7,15}$/;
            var username = $("#username").val();
            return reg.test(username);
        }
        //密码 7-15位数字和字母
        function checkPassword() {
            var password = $("#password").val();
            var reg = /^\w{7,15}$/;
            return reg.test(password);
        }
        //密码 7-15位数字和字母
        function checkPassword1() {
            var password = $("#password1").val();
            var reg = /^\w{7,15}$/;
            return reg.test(password);
        }
        //姓名 2--4位中文
        function checkName() {
            var name = $("#name").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}$/
            return reg.test(name);
        }
        //班级 多个中文+0个和1和字母+多个数字+班
        function checkQuad() {
            var quad = $("#quad").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}B?\d{1,5}班$/
            return reg.test(quad);
        }
        //email判断
        function checkEmail() {
            //获取用户输入数据
            var email = $("#email").val();
            //定义正则表达式
            var reg = /^\w+@\w+\.\w+$/;
            //返回是否满足正则表达式
            return reg.test(email);
        }
        //手机号判断
        function checkPhone() {
            //获取用户输入数据
            var phone = $("#phone").val();
            //定义正则表达式  1开头 另外11个数字
            var reg = /^1\d{10,10}$/;
            //返回是否满足正则表达式
            return reg.test(phone);
        }
        //楼栋号
        function checkBuilding() {
            var building = $("#building").val();
            var reg = /^\d{1,3}$/;
            return reg.test(building);
        }
        //房间号
        function checkRoom() {
            var room = $("#room").val();
            var reg = /^\d{1,3}$/;
            return reg.test(room);
        }
        //床号号
        function checkBed() {
            var bed = $("#bed").val();
            var reg = /^\d{1,2}$/;
            return reg.test(bed);
        }
        //验证码
        function checkCheck(){
            var check = $("#check").val();
            var reg = /^\w{4,4}$/;
            return reg.test(check);
        }

        //入口函数
        $(function () {
            //form表单提交
            $("#registerForm").submit(function () {
                //1. 首先判断各个表单项是否满足正则表达式，如果满足就向后台发送ajax请求
                if (checkUsername() && checkPassword() && checkPassword1() && checkName() && checkQuad() && checkEmail() && checkPhone() && checkBuilding() && checkRoom() && checkBed() && checkCheck()){
                    //2. 发送ajax请求
                    $.post("user/register",$("#registerForm").serialize(),function (data) {
                        if (data.flag){
                            //注册成功
                            alert("注册成功！即将跳往登录界面。")
                            location.href="index.html";
                        }else{
                            //注册失败，给出错误提示
                            $("#hint").html(data.errorMsg);
                        }
                    },"json");
                }
                //避免form表单又提交一次
                return false;
            });

            //给各个表单项添加离焦事件
            //学号
            $("#username").blur(function () {
                if (checkUsername()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //密码
            $("#password").blur(function () {
                if (checkPassword()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            $("#password1").blur(function () {
                if (checkPassword1()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //姓名
            $("#name").blur(function () {
                if (checkName()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //班级
            $("#quad").blur(function () {
                if (checkQuad()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //邮箱
            $("#email").blur(function () {
                if (checkEmail()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //手机号
            $("#phone").blur(function () {
                if (checkPhone()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //楼栋号
            $("#building").blur(function () {
                if (checkBuilding()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //房间号
            $("#room").blur(function () {
                if (checkRoom()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //床号
            $("#bed").blur(function () {
                if (checkBed()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //验证码
            $("#check").blur(function () {
                if (checkCheck()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });


        });
    </script>
</head>
<body>
    <div class="alert alert-info" role="alert" align="center">欢迎使用系统，当前正在注册！</div>

<!-- 中间表单的外框 -->
<div class="rg_layout">
    <!-- 注册失败错误提示信息 -->
    <div id="hint"></div>

    <!-- 登录表单 -->
    <form action="#" method="post" id="registerForm">
        <table>
            <tr>
                <td class="td_left">
                    <label for="username">学号<small>(账号)</small></label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="username" name="sid" placeholder="请输入学号,7-15位数字"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">密码</label>
                </td>
                <td class="td_right">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码，7-15位数字和字母"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">确认密码</label>
                </td>
                <td class="td_right">
                    <input type="password" class="form-control" id="password1" name="password1" placeholder="确认密码，7-15位数字和字母"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="name">姓名</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="name" name="sname" placeholder="请输入姓名，2-4位中文"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label>性别</label>
                </td>
                <td class="td_right">
                    &nbsp;&nbsp;
                    <input type="radio" name="gender" value="男" checked>男
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" value="女">女
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="quad">班级</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="quad" name="squad" placeholder="请输入班级，如：物联1703班"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="email">邮箱</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="phone">手机号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="building">楼栋号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="building" name="building" placeholder="请输入楼栋号，直接输入数字即可"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="room">房间号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="room" name="room" placeholder="请输入房间号，直接输入数字即可"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="bed">床号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="bed" name="bed" placeholder="请输入床号，直接输入数字即可"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="check">验证码</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="check" name="check" placeholder="验证码"/>
                </td>
            </tr>
            <!-- 验证码 -->
            <tr>
                <td colspan="2" class="td_img"><img src="checkCode" onclick="changeCheckCode(this)"/></td>
            </tr>
            <!-- 注册按钮 -->
            <tr>
                <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="注册"></td>
            </tr>
            <tr>
                <td colspan="2" class="td_a" ><a href="index.html" title="即将跳往登录界面">已有账号，返回登录！</a></td>
            </tr>
        </table>
    </form>
</div>

<div class="alert alert-info" role="alert" style="margin-top:10px;">
    <span><b>温馨提示：</b></span><br/>
    <p>请勿频繁操作！</p>
</div>

</body>
</html>